<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			#box {
				width: 400px;
				height: 400px;
				border: 1px solid red;
				position: relative;
				margin: 100px;
			}
			
			#box .cover {
				width: 200px;
				height: 200px;
				background: yellow;
				opacity: 0.5;
				filter: alpha(opacity: 50);
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 1;
				display: none;
			}
			
			#box .opac {
				width: 400px;
				height: 400px;
				opacity: 0;
				filter: alpha(opacity: 0);
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 100;
			}
			
			#hide {
				width: 400px;
				height: 400px;
				border: 1px solid black;
				overflow: hidden;
				position: absolute;
				top: 100px;
				left: 550px;
				display: none;
			}
			
			#hide img {
				position: absolute;
				top: 0px;
				left: 0px;
			}
		</style>
		<script>
			window.onload = function() {
				var oBox = document.getElementById("box");
				var oCover = oBox.children[1];
				var oPac = oBox.children[2];
				console.log(oBox, oCover, oPac);
				//获得大图盒子的元素
				var oHide = document.getElementById("hide");
				var oImg = oHide.children[0];

				oPac.onmouseover = function() {
					oCover.style.display = 'block';
					oHide.style.display = 'block';
				}
				oPac.onmouseout = function() {
					oCover.style.display = 'none';
					oHide.style.display = 'none';
				}

				oPac.onmousemove = function(ev) {
					var ev = window.event || ev;
					
					var left = ev.clientX - oBox.offsetLeft - oCover.offsetWidth / 2;
					var top = ev.clientY - oBox.offsetTop - oCover.offsetHeight / 2;
					if (left < 0) {
						left = 0;
					}
					if (top < 0) {
						top = 0;
					}
					var maxLeft = oBox.offsetWidth - oCover.offsetWidth;
					var maxTop = oBox.offsetHeight - oCover.offsetHeight;
					if (left > maxLeft) {
						left = maxLeft;
					}
					if (top > maxTop) {
						top = maxTop;
					}
					oCover.style.left = left + 'px';
					oCover.style.top = top + 'px';

					//				计算大图片的移动left和top,黄色区块移动的位移/它能够移动的最大范围 = 大图片应该移动的位移/大图片能够移动的范围
					var scaleX = left / maxLeft;
					var scaleY = top / maxTop;

					var imgLeft = scaleX * (oImg.offsetWidth - oHide.offsetWidth);
					var imgTop = scaleY * (oImg.offsetHeight - oHide.offsetHeight);

					oImg.style.left = -imgLeft + 'px';
					oImg.style.top = -imgTop + 'px';

				}

			}
		</script>
	</head>

	<body>
		<div id="box">
			<img src="./images/400.jpg" alt="" />
			<div class="cover"></div>
			<div class="opac"></div>
		</div>

		<div id="hide">
			<img src="./images/800.jpg" alt="" />
		</div>

	</body>

</html>